<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta name="viewport"
          content="width=device-width,height=device-height,maximum-scale=1.0,user-scalable=no">
    <title>摇一摇拔河</title>
    <link rel="stylesheet" href="../css/style.css" media="screen" type="text/css"/>

</head>
<body >
    <div>
        <img id="img_slider" src="../img/countdown_3.png" style="width: 100%;height: 100%" />
        <div style="position: relative; margin-top: -100%">
            <img id="ruler" src="../img/ruler.png" style="height: 150px;"/>
            <canvas id="cursor" style="margin-left: 45px;position: relative;"></canvas>
        </div>
    </div>
</body>
<script src="../js/jquery-1.9.1.min.js"></script>
<script src="../js/canvas.js"></script>
<script src="../js/shake.js"></script>

<script>
    var index = 0;
    var downNum = 0;
    var interval_id;
    var coord_y = 75;
    var canvas = document.getElementById("cursor");
    var ctx = canvas.getContext("2d");

    canvas.width = 100;
    canvas.height = 150;

    tri = new triangle(ctx, 0, 75);


    $(function(){
        countDown();
        $('#ruler').hide();
    });

    /**send data in socket*/
    function pushData(){
        coord_y -= 5;
        tri.y = coord_y;
        drawTriangle(ctx, canvas);
    }

    function changeAnim(_index){
        if(0 == _index % 4){
            $("#img_slider").attr("src", "../img/tugofwar1.png");

            //start shake
            if(0 == _index){
                $('#ruler').show();
                init(pushData);
                //init tri position
                tri.y = coord_y;
                drawTriangle(ctx, canvas);
            }

        }else if(1 == _index % 4){
            $("#img_slider").attr("src", "../img/tugofwar2.png");
        }else if(2 == _index % 4){
            $("#img_slider").attr("src", "../img/tugofwar3.png");
        }else if(3 == _index % 4){
            $("#img_slider").attr("src", "../img/tugofwar4.png");
        }
        index++;
    }

    function changeCountDown(_downNum){
        if(0 == _downNum % 2){
            $("#img_slider").attr("src", "../img/countdown_2.png");
        }else if(1 == _downNum % 2){
            $("#img_slider").attr("src", "../img/countdown_1.png");

            loopAnim();
            clearInterval(interval_id);
        }

        downNum++
    }

    function loopAnim(){
        setInterval("changeAnim(index)",500);
    }

    function countDown(){
        interval_id =setInterval("changeCountDown(downNum)", 1000);
    }


</script>
</html>